import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 需安装此模块 npm install --save-dev @types/node

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  console.log('command', command)
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const {VITE_APP_BASE_API} = loadEnv(mode, process.cwd())
  return {
    plugins: [
      vue(),
    ],
    build: {
      base: './',
      outDir: 'dist', // 指定输出路径，默认'dist'
      assetsDir: 'assets', // 指定生成静态资源的存放路径
      // minify: 'terser', // 混淆器，terser构建后文件体积更小
      cssCodeSplit: true, // 拆分css
      rollupOptions: {
        output: {
          // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
          entryFileNames: 'js/[name].[hash].js',
          // 用于命名代码拆分时创建的共享块的输出命名
          // 　　chunkFileNames: 'js/[name].[hash].js',
          // 用于输出静态资源的命名，[ext]表示文件扩展名
          // assetFileNames: '[ext]/[name].[hash].[ext]',
          // 拆分js到模块文件夹
          chunkFileNames: (chunkInfo) => {
            const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
            const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
            return `js/${fileName}/[name].[hash].js`;
          },
          // 拆分静态资源到模块文件夹
          assetFileNames: (assetInfo) => {
            const facadeModuleId = assetInfo.name ? assetInfo.name.split('/') : [];
            const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
            // 如果是css文件，就放到css文件夹下。如果是其他文件，就放到assets文件夹下
            if (assetInfo.name.endsWith('.css')) {
              // return `css/${fileName}/[name].[hash].css`;
              return `css/[name].[hash].css`;
            }else {
              return `assets/${fileName}/[name].[hash].[ext]`;
            }
          }
        }
      }
    },
    server: {
      port: 3000,
      host: '0.0.0.0',
      proxy:{
        '/api': {
          target: VITE_APP_BASE_API,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },
    resolve: {
      alias: {  // 这里就是需要配置resolve里的别名
        "@": path.join(__dirname, "./src"), // path记得引入
        // 'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名，如果使用其他的插件，可能会用到别名
      },
    }
  }
})
